<template>
  <div>
    <div>
      <page-title title="待评审订单/处理" home-path="/center/home"></page-title>
    </div>
    <div class="pageMain">
      <div class="pageMain-title">
        <span>技术评审</span>
      </div>
      <div class="pageMain-body">
        <div class="container">
          <div class="left-half">
            <order-detail :form-data="formData"></order-detail>
          </div>
          <div class="vertical-line"></div>
          <div class="right-half">
            <h3 style="margin-bottom: 10px">1.评审意见</h3>
            <el-table :data="tableData" border>
              <el-table-column label="评审部门" prop="department" width="200">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.department"
                    size="small"
                    @input="handleInputChange(scope.row)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="评审人" prop="assessor" width="200">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.assessor"
                    size="small"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="评审意见" prop="comment">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.comment" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="addRow"
                    >添加新意见</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="addDelete(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-form
                :model="orderDetails"
                :rules="rules"
                label-width="150px"
                label-position="left"
              >
              <el-form-item prop="firstTrialProduction" label="首试制">
                <el-radio-group v-model="orderDetails.isMake">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="isCostByChange" label="是否引起成本变化">
                <el-radio-group v-model="orderDetails.isCostByChange">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="risk" label="风险等级评估">
                <el-radio-group v-model="orderDetails.assess">
                  <el-radio :label="0">高</el-radio>
                  <el-radio :label="1">中</el-radio>
                  <el-radio :label="2">低</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="outsourcingStatus" label="外委情况">
                <el-checkbox v-model="orderDetails.outsourcingStatus" :true-label="1" :false-label="0"></el-checkbox>
              </el-form-item>
              <el-form-item label=" 成本测算：">
                <el-button type="text" size="medium">测算详情</el-button>
              </el-form-item>
              <h3 style="margin-top: 10px">2.评审结论</h3>
              <el-form-item prop="receivingState">
                <el-radio-group v-model="orderDetails.receivingState">
                  <el-radio :label="1"><span style="color:#67C23A">接单</span></el-radio>
                  <el-radio :label="0"><span style="color:#F56C6C">不接单</span></el-radio>
                  <el-radio :label="2"><span style="color:#E6A23C">带条件生产</span></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-show="orderDetails.receivingState == 2">
                <el-input
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  v-model="orderDetails.receivingRemark"
                  placeholder="请输入接单条件"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-form>
            <div style="margin-top: 20px">
              <el-button type="primary" size="mini" @click="previewPdf"
                >预览</el-button
              >
              <el-button type="success" size="mini" @click="handInDirector"
                >提交</el-button
              >
              <el-button type="warning" size="mini" @click="goStandard"
                >无法评审，退回标准科</el-button
              >
              <el-button v-if="!formData.isOutsourcingFirm" type="warning" size="mini" @click="changeOutsourcing">
                需外委或更换外委单位，退回销售
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderDetail from "@/components/OrderDetail.vue";
import PageTitle from "@/components/PageTitle.vue";
import { post } from "@/lib/Util.js";

import {
  signOutStandardDepartment,
  signOutSale,
  getReviewedLeftList,
  submitTheReviewForm
} from "@/lib/Api.js";
export default {
  components: { OrderDetail, PageTitle },
  data() {
    return {
      formData: {},
      orderDetails: {},
      rules: {
        firstTrialProduction: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        risk: [{ required: true, message: "请选择", trigger: "blur" }],
        outsourcing: [{ required: true, message: "请选择", trigger: "blur" }],
        isCostByChange: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        receivingState: [
          { required: true, message: "请选择评审结论", trigger: "blur" }
        ]
      },
      isEditing: false,
      fromPath: "",
      tableData: [{ department: "", assessor: "", comment: "" }]
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromPath = from.path;
    });
  },
  computed: {
    // 通过 Vuex getter 获取共享参数
    sharedId() {
      return this.$store.getters.getSharedId;
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    //获取左侧表格数据
    getTableData() {
      let data = {
        contractInfoId: this.sharedId
      };
      post(getReviewedLeftList, data).then(res => {
        if (res.code == 200) {
          this.formData = res.data;
        }
      });
    },
    goHome() {
      this.$router.push({
        path: "/center/home"
      });
    },
    goBack() {
      this.$router.push({
        path: "/center/toBeReviewed"
      });
    },
    handleChange(fceId) {
      this.currentFceId = fceId;
      console.log(fceId);
    },
    //退回标准科
    goStandard() {
      this.backStandard();
      this.$router.push({
        path: this.fromPath
      });
    },
    backStandard() {
      let data = {
        id: this.sharedId
      };
      post(signOutStandardDepartment, data).then(res => {
        if (res.code == 200) {
          this.$message.success("成功退回标准科");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //退回给销售
    changeOutsourcing() {
      this.backSaleCenter();
      this.$router.push(this.fromPath);
    },
    backSaleCenter() {
      let data = {
        id: this.sharedId
      };
      post(signOutSale, data).then(res => {
        if (res.code == 200) {
          this.$message.success("成功退回给销售");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //提交给主任
    handInDirector() {
      this.sumbitForm();
      this.$router.push({
        path: this.fromPath
      });
    },
    sumbitForm() {
      let data = {
        assess: this.orderDetails.assess, // 风险等级评估
        id: this.sharedId,
        isMake: this.orderDetails.isMake, // 首试制
        outsourcingStatus: this.orderDetails.outsourcingStatus, // 外委情况
        receivingRemark: this.orderDetails.receivingRemark, // 待条件生产的条件
        receivingState: this.orderDetails.receivingState, // 接单
        isCostByChange: this.orderDetails.isCostByChange, // 是否引起成本变化
        reviewInfoDtoList: this.tableData
      };
      post(submitTheReviewForm, data).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功！");
        }
      });
    },
    //预览PDF
    previewPdf() {},
    // 处理输入框数据变化
    handleInputChange(row) {
      console.log(row);
    },
    //添加行
    addRow() {
      this.tableData.push({
        department: "",
        assessor: "",
        comment: ""
      });
    },
    //删除行
    addDelete(index) {
      this.tableData.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.left-half,
.right-half {
  flex: 1;
  padding: 10px;
  width: 50%;
  margin: 0px 30px;
}

.vertical-line {
  width: 2px;
  background-color: #ccc;
  margin: 0 10px;
  height: 100%;
}
/deep/ input[aria-hidden="true"] {
  display: none !important;
}

/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
